<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>gmail 多选、光标跟随模式</title>
    <link href="/kissy/build/css/dpl/base.css" rel="stylesheet"/>
    <link href="../../../demo/assets/default.css" rel="stylesheet"/>

</head>
<body>
<h1 style="text-align: center">gmail 多选、光标跟随模式</h1>

<div style="margin:10px auto; width:80%;text-align: center" id="container">
    <h2>
        static : input a or b or c or d or 3，逗号分隔
    </h2>

    <div class="ks-multi-value-combobox" id="combobox" style="width:400px">
        <div class="ks-multi-value-combobox-input-wrap">
            <textarea style="width:100%;height:18px;" aria-haspopup="true"
                      aria-combobox="list" role="combobox" combobox="off"
                      class="ks-multi-value-combobox-input" tabindex="0"
                    ></textarea>
        </div>
    </div>
</div>

<script src="/kissy/build/seed-debug.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use("util,combobox,combobox/multi-word", function (S, util,ComboBox, MultiWordComboBox) {
        var data = [
            '"a123456" <a123456@gmail.com>',
            '"b12345" <b12345@gmail.com>',
            'c3464356@gmail.com',
            '"d23434" <d23434@gmail.com>'
        ];

        var basicComboBox = new MultiWordComboBox({
            srcNode: '#combobox',
            separator: ',',
            hasTrigger: false,
            matchElWidth: false,
            dataSource: new ComboBox.LocalDataSource({
                data: data,
                parse: function (query, data) {
                    var ret = [];
                    util.each(data, function (d) {
                        if (d.replace(/@gmail\.com/, "").indexOf(query) != -1) {
                            ret.push(d);
                        }
                    });
                    return ret;
                }
            }),
            alignWithCursor: true,
            updateInputOnDownUp: false,
            format: function (query, data) {
                var ret = [];
                for (var i = 0; i < data.length; i++) {
                    var v = data[i] + "";
                    if (query) {
                        ret[i] = {
                            content: S.escapeHtml(v)
                                    .replace(new RegExp(util.escapeRegExp(query), "g"),
                                            "<b>$&</b>")
                        };
                    } else {
                        ret[i] = {
                            content: S.escapeHtml(v)
                        };
                    }
                }
                return ret;
            }
        });

        basicComboBox.render();

        var basicComboBoxEl = basicComboBox.get('input');

        basicComboBoxEl.on("keyup", function () {
            // scrollHeight will always grow in chrome
            basicComboBoxEl.css("height", 0);
            basicComboBoxEl.css("height", basicComboBoxEl[0].scrollHeight);
        });

        basicComboBox.on("click", function (e) {
            var item = e.target;
            S.log(item.get("value") + "\n" + item.get("content") +
                    "\n" + item.get('textContent'));
        });
    });
</script>
</body>
</html>